﻿@model Springwater.Business.ViewModels.ViewAllModel

@{
    ViewBag.Title = "ViewAll";
}

@section Head{
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
}

<h2>ViewAll</h2>

<div class="ViewAll">
    <div id="map_canvas"></div>
    <div>
        @Html.Action("SearchPanel", "Borviz")
    </div>
</div>

<div id="content" style="display: none;">
    <div class="Info" style="overflow: hidden; width: 120%;">
        <table>
            <tr>
                <td>
                    <div class="Nev">_Nev_</div>
                    <div>Eredet: _Eredet_</div>
                    <div>Meresek Szama: MeresekSzama</div>
                    <div>Fenykepek Szama: FenykepekSzama</div>
                </td>
                <td>
                    <img src="LegujabbFenykep" />
                </td>
            </tr>
        </table>
    </div>
</div>

@section scripts{

<script type="text/javascript">
    var borvizList = [ 
        @foreach(var borviz in Model.BorvizSummaryModelList){
            @Html.Raw(string.Format("[{0},{1},'{2}',{3},'{4}',{5},{6},'{7}'],\n", borviz.Latitude, borviz.Longitude, borviz.Nev, borviz.Id, borviz.Eredet, borviz.MeresekSzama, borviz.FenykepekSzama, Url.Content(borviz.LegujabbFenykep)))
        }
    ];

    var infowindow = null;

    function initialize() {
        var mapCanvas = document.getElementById('map_canvas');
        var mapOptions = {
            center: new google.maps.LatLng(@Model.Latitude, @Model.Longitude),
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.HYBRID 
        }

        var map = new google.maps.Map(mapCanvas, mapOptions);
        var markers = new Array();

        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var url = '@Url.Action("Index", "Borviz", new { id = "_ID_" })';

        for(var i=0; i < borvizList.length; i++)
        {
            var borviz = borvizList[i];
            CreateMarker(map, borviz, url);
        }

    }

    function CreateMarker(map, borviz, url){
       
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(borviz[0], borviz[1]),
            map: map,
            title: borviz[2]
        });

        var id = borviz[3];

        google.maps.event.addListener(marker, 'mouseover', function() {
            OnMarkerOver(map,marker, borviz);
        });

        google.maps.event.addListener(marker, 'mouseout', function() {
            OnMarkerOut();
        });

        google.maps.event.addListener(marker, 'click', function() {
            window.location = url.replace("_ID_", borviz[3]);
        });

        //marker.setAnimation(google.maps.Animation.BOUNCE);
    }

    function OnMarkerOver(map, marker, borviz){
        infowindow = null;
        
        var contentHtml = $("#content").html();
        contentHtml = contentHtml.replace("_Nev_", borviz[2]).replace("_Eredet_", borviz[4]).replace("MeresekSzama", borviz[5]).replace("FenykepekSzama", borviz[6]).replace("LegujabbFenykep", borviz[7]);
        infowindow = new google.maps.InfoWindow();

        var $infoWindowContent = $("<div class='infowin-content'>" + contentHtml + "</div>");
        infowindow.setContent($infoWindowContent[0]);
        infowindow.open(map,marker);
    }

    function OnMarkerOut(){
        infowindow.close();    
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

}
